<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span style="display: inline-block; width: calc(100% - 51px); padding-right: 10px; text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height: 20px; width: 20px; border: 0px"></a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :label="$t('登录账号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
          <a-input
            :placeholder="$t('请输入登录账号')"
            v-model="model.username"
            :readOnly="!!model.id"
            @change="changeUser()"
          />
        </a-form-model-item>
        <template v-if="!model.id">
          <a-form-model-item :label="$t('登录密码')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password">
            <div style="display: flex; align-items: center; height: 40px">
              <a-input type="password" :placeholder="$t('请输入登录密码')" v-model="model.password" /><span
                v-if="!freePass"
                style="color: #1890ff; white-space: nowrap; margin-left: 4px"
                @click="closeValid"
                >{{ $t('关闭安全密码') }}</span
              >
            </div>
          </a-form-model-item>
          <a-form-model-item
            :label="$t('确认密码')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="confirmpassword"
          >
            <a-input
              type="password"
              @blur="handleConfirmBlur"
              :placeholder="$t('请重新输入登录密码')"
              v-model="model.confirmpassword"
            />
          </a-form-model-item>
        </template>
        <a-form-model-item :label="$t('用户姓名')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
          <a-input :placeholder="$t('请输入用户姓名')" v-model="model.realname" />
        </a-form-model-item>
        <a-form-model-item :label="$t('工号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">
          <a-input :placeholder="$t('请输入工号')" v-model="model.workNo" />
        </a-form-model-item>
        <a-form-model-item :label="$t('手机号码')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
          <a-input :placeholder="$t('请输入手机号')" v-model="model.phone" />
        </a-form-model-item>
        <a-form-model-item
          :label="$t('角色分配')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="selectedroles"
          v-show="!roleDisabled"
        >
          <j-multi-select-tag
            :disabled="
              disableSubmit ||
              tenantId == model.username ||
              model.username == 'administrator' ||
              model.tenantId == model.username
            "
            v-model="model.selectedroles"
            :options="rolesOptions"
            :placeholder="$t('请选择角色')"
          >
          </j-multi-select-tag>
        </a-form-model-item>
        <a-form-model-item :label="$t('头像')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="avatar-uploader" :text="$t('上传')" v-model="model.avatar"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item :label="$t('生日')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            :placeholder="$t('请选择生日')"
            v-model="model.birthday"
            :format="dateFormat"
            :getCalendarContainer="(node) => node.parentNode"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('性别')" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            v-model="model.sex"
            :placeholder="$t('请选择性别')"
            :getPopupContainer="(target) => target.parentNode"
          >
            <a-select-option :value="1">{{ $t('男') }}</a-select-option>
            <a-select-option :value="2">{{ $t('女') }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="$t('邮箱')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
          <a-input :placeholder="$t('请输入邮箱')" v-model="model.email" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm :title="$t('确定放弃编辑？')" @confirm="handleCancel" :okText="$t('确定')" :cancelText="$t('取消')">
        <a-button style="margin-right: 0.8rem">{{ $t('取消') }}</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{ $t('提交') }}</a-button>
    </div>
    <yarn-cert-out-captcha-modal
      ref="yarnModal"
      @ok="handleSubmitCallback"
      @cancel="handleSubmitClose"
    ></yarn-cert-out-captcha-modal>
    <user-settings-modal ref="modalForm" @close="modalFormOk" />
  </a-drawer>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import { addUser, editUser, queryUserRole, queryall } from '@/api/api'
import { disabledAuthFilter } from '@/utils/authFilter'
import YarnCertOutCaptchaModal from '@/views/setting/modules/YarnCertOutCaptchaModal'
import UserSettingsModal from './UserSettingsModal'
export default {
  name: 'UserModal',
  components: {
    YarnCertOutCaptchaModal,
    UserSettingsModal,
  },
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
      roleDisabled: false, //是否是角色维护调用该页面
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      userId: '', //保存用户id
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD',
      validatorRules: {
        username: [{ required: true, message: this.$t('请输入用户账号') }, { validator: this.validateUsername }],
        password: [{ required: true, message: this.$t('请输入密码') }, { validator: this.validateToNextPassword }],
        confirmpassword: [
          { required: true, message: this.$t('请重新输入登录密码') },
          { validator: this.compareToFirstPassword },
        ],
        realname: [{ validator: this.validateRealname }],
        workNo: [{ validator: this.validateWorkNo }],
        phone: [{ validator: this.validatePhone }],
        selectedroles: [{ required: true, message: this.$t('请选择角色') }],
        email: [{ validator: this.validateEmail }],
      },
      title: this.$t('操作'),
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
        userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
        userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
        syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName', //同步用户到工作流
        queryTenantList: '/sys/tenant/queryList',
      },
      tenantsOptions: [],
      rolesOptions: [],
      nextDepartOptions: [],
      tenantId: Vue.ls.get('TENANT_ID'),
      freePass: localStorage.getItem('freePass') == 'true' ? true : false,
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
    this.initRoleList()
    this.initTenantList()
  },
  computed: {
    uploadAction: function () {
      return this.url.fileUpload
    },
  },
  methods: {
    closeValid() {
      this.$refs.modalForm.show()
    },
    modalFormOk() {
      this.$nextTick(() => {
        this.freePass = localStorage.getItem('freePass') == 'true' ? true : false
        this.$refs.form.clearValidate()
      })
    },
    add() {
      this.refresh()
      this.edit({ activitiSync: '1' })
    },
    edit(record) {
      let that = this
      that.visible = true
      //根据屏幕宽度自适应抽屉宽度
      that.resetScreenSize()
      that.userId = record.id
      that.model = Object.assign({}, { selectedroles: '' }, record)
      that.freePass = localStorage.getItem('freePass') == 'true' ? true : false
      //身份为上级显示负责部门，否则不显示
      if (record.hasOwnProperty('id')) {
        that.getUserRoles(record.id)
        //that.getUserDeparts(record.id)
      }
    },
    changeUser() {
      this.$set(this.model, 'realname', this.model.username)
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code)
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    //初始化租户字典
    initTenantList() {
      getAction(this.url.queryTenantList).then((res) => {
        if (res.success) {
          this.tenantsOptions = res.result.map((item, index, arr) => {
            let c = { label: item.name, value: item.id + '' }
            return c
          })
        }
      })
    },
    //初始化角色字典
    initRoleList() {
      queryall().then((res) => {
        if (res.success) {
          this.rolesOptions = res.result.map((item, index, arr) => {
            let c = { label: item.roleName, value: item.id }
            return c
          })
        }
      })
    },
    getUserRoles(userid) {
      queryUserRole({ userid: userid }).then((res) => {
        if (res.success) {
          this.model.selectedroles = res.result.join(',')
        }
      })
    },
    getUserDeparts(userid) {
      let that = this
      getAction(that.url.userWithDepart, { userId: userid }).then((res) => {
        if (res.success) {
          let departOptions = []
          let selectDepartKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectDepartKeys.push(res.result[i].key)
            //新增负责部门选择下拉框
            departOptions.push({
              value: res.result[i].key,
              label: res.result[i].title,
            })
          }
          that.nextDepartOptions = departOptions
        }
      })
    },
    refresh() {
      this.userId = ''
      this.nextDepartOptions = []
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.nextDepartOptions = []
      this.$refs.form.resetFields()
    },
    handleSubmit() {
      let that = this
      that.$delete(that.model, 'captcha');
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          if (!that.model.id) {
            that.model.id = that.userId
            that.type = 1
          } else {
            that.type = 2
          }
          let obj
          if (that.type === 1) {
            obj = addUser(that.model)
          } else {
            obj = editUser(that.model)
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok', that.model.username)
              that.close()
              that.confirmLoading = false
            } else if(res.code == 750){ // 需要验证码
              that.$refs.yarnModal.show(that.model)
            } else {
              that.$message.warning(res.message)
              that.confirmLoading = false
            }
          }) 
          //如果是上级择传入departIds,否则为空
        } else {
          return false
        }
      })
    },
    handleSubmitCallback(model) {
      let that = this
      let obj
      if (that.type === 1) {
        obj = addUser(model)
      } else {
        obj = editUser(model)
      }
      obj
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok', that.model.username)
            that.$refs.yarnModal.close()
            this.close()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
        })
    },
    handleSubmitClose() {
      this.confirmLoading = false
    },
    handleCancel() {
      this.close()
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword
      if (value && confirmpassword && value !== confirmpassword) {
        callback(this.$t('两次输入的密码不一样'))
      }
      if (!this.freePass) {
        if (!/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,20}$/.test(value)) {
          callback(this.$t('密码由8~20位数字、大小写字母和特殊符号组成!'))
        }
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(['confirmpassword'])
      }
      callback()
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback(this.$t('两次输入的密码不一样'))
      } else {
        callback()
      }
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
          getAction('/sys/user/checkOnlyUser', {
            phone: value,
            id: this.userId,
          }).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback(this.$t('手机号已存在'))
            }
          })
        } else {
          callback(this.$t('请输入正确格式的手机号码'))
        }
      }
    },
    validateEmail(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (
          new RegExp(
            /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          ).test(value)
        ) {
          getAction('/sys/user/checkOnlyUser', {
            email: value,
            id: this.userId,
          }).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback(this.$t('邮箱已存在'))
            }
          })
        } else {
          callback(this.$t('请输入正确格式的邮箱'))
        }
      }
    },
    validateUsername(rule, value, callback) {
      getAction('/sys/user/checkOnlyUser', {
        username: value,
        id: this.userId,
      }).then((res) => {
        if (res.success) {
          if (this.tenantId && (value == 'admin' || value == 'manage' || value == 'administrator')) {
            callback(this.$t('不支持该用户名，请更换其他字符'))
          } else {
            callback()
          }
        } else {
          callback(this.$t('用户名已存在'))
        }
      })
    },
    validateRealname(rule, value, callback) {
      getAction('/sys/user/checkOnlyUser', {
        realname: value,
        id: this.userId,
      }).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback(this.$t('用户名称已存在'))
        }
      })
    },
    validateWorkNo(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        getAction('/sys/user/checkOnlyUser', {
          workNo: value,
          id: this.userId,
        }).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(this.$t('工号已存在'))
          }
        })
      }
    },
    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    beforeUpload: function (file) {
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning(this.$t('请上传图片'))
        return false
      }
      //TODO 验证文件大小
    },
  },
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

/*【JTC-502】 添加用户两个滚动条*/
/deep/ .ant-drawer-body {
  padding-bottom: 53px;
}
</style>
